import React, { useEffect } from 'react'
import { Layout, Menu ,Popconfirm ,message} from 'antd'
import { HomeOutlined, DiffOutlined, EditOutlined,LogoutOutlined } from '@ant-design/icons'
import styles from  './index.module.scss'
import Homes  from './Homes/Homes'
import Article from './Article/Article.jsx'
import Publish from './Publish/Publish.jsx'

import { Route,Switch, Link } from 'react-router-dom'
import { useDispatch, useSelector} from 'react-redux'
import { getUserInif } from '@/store/actions/user'
// import {getArticle,getChannels} from '@/store/actions/article'
import { logout } from '@/store/actions/login'

// const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const Home = ({history}) => {
    const user = useSelector(state=>state.user)
    const dispatch =useDispatch()
    const logoutHandler = ()=>{
        dispatch(logout)
        // 2. 跳转到登录页
        // console.log(history.location.pathname)
        history.push('/login',{from:history.location.pathname})
        // console.log(history.location.state.from )
        // 3. 提示消息
        message.success('退出成功', 1)
    }
    useEffect(()=>{
        dispatch(getUserInif())
        // dispatch(getChannels())
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
return (<div className={styles.root}>
    <Layout>
      <Header className="header" style={{background: 'linear-gradient(to right, #ffff00, #f8ea47, #f0d465, #f0d465, #e7bf7c, #ddaa8f, #d095a1, #c280b2, #b26cc2, #9d56d2, #8440e1, #6028f0, #0000ff )'}}>
        <div className="logo" />
        <div className="profile">
            <span>{ user.name}</span>
                <Popconfirm
                    title="你确定要退出本系统吗?"
                    okText="确定"
                    cancelText="取消"
                    placement="bottomRight"
                    onConfirm={logoutHandler}
                >
            <span>
            <LogoutOutlined></LogoutOutlined> 退出
            </span>
            </Popconfirm>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
            {/* theme:风格主题
                defaultSelectedKeys：默认选中 */}
            <Menu
                theme="dark"
                mode="inline"
                // startsWith() 以什么开头
                defaultSelectedKeys={[history.location.pathname.startsWith('/home/publish')?'/home/publish':history.location.pathname ]}
                selectedKeys={[history.location.pathname.startsWith('/home/publish')?'/home/publish':history.location.pathname ]}
                style={{ height: '100%', borderRight: 0 ,background: 'linear-gradient(to bottom, #ffff00, #f8ea47, #f0d465, #f0d465, #e7bf7c, #ddaa8f, #d095a1, #c280b2, #b26cc2, #9d56d2, #8440e1, #6028f0, #0000ff )'}}>
                <Menu.Item key="/home" icon={<HomeOutlined />}>
                   <Link to="/home">数据概览</Link>
                </Menu.Item>
                <Menu.Item key="/home/article" icon={<DiffOutlined />}>
                   <Link to="/home/article">内容管理</Link>
                </Menu.Item>
                <Menu.Item key="/home/publish" icon={<EditOutlined />}>
                   <Link to="/home/publish">发布文章</Link>
                </Menu.Item>
            </Menu>
        </Sider>
        <Layout style={{ padding: '24px' }}>
            <Content className="site-layout-background" style={{overflow: 'auto'}}>
                <Switch>
                    {/* 这里是二级路由，它的path与一级路由是一致的。进入/home时，就能默认显示/home */}
                    <Route exact path="/home" component={Homes}></Route>
                    <Route path="/home/article" component={Article}></Route>
                    <Route key='add' exact path="/home/publish" component={Publish}></Route>
                    <Route key='edit' path="/home/publish/:id" component={Publish}></Route>
                </Switch>
            </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
  )
}
export default Home